<template>
	<div class="container">
		<!-- 主导航栏 -->
		<ul class="main-tabs clearfix">
			<li v-for="(item,index) in mainTabs.data" :key="index" :class="{active:index==mainTabs.index}"
				@click="mainTabSwitch(index)">{{item.title}}</li>
		</ul>

		<!-- 头部信息 -->
		<h3 class="header-title clearfix">
			<span></span>
			<p>{{headerTitle}}</p>
		</h3>

		<!-- 副导航栏 -->
		<el-form :model="form" :inline="true" style="margin-top: 20px;">

			<el-form-item label="雇主姓名">
				<el-input v-model="form.userName" placeholder="请输入姓名"></el-input>
			</el-form-item>

			<el-form-item label="手机号码">
				<el-input v-model="form.telnum" placeholder="请输入手机号码"></el-input>
			</el-form-item>


			<el-form-item label="发布时间段" >
				<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>~
				<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>

			<el-form-item style="width:300px;text-align:center;">
				<el-button type="primary" @click="search" size="small" class="searchBtn">查询</el-button>
			</el-form-item>
		</el-form>
		<comNavTabs :navList="navList" @switch="tabSwitch"></comNavTabs>


		<!-- 数据展示的列表 openlookDialog-->
		<comTable :options="tableList" @openConDialog="openContractDialog"
		@openlookDialog="function(data){openlookDialog(data)}"
		></comTable>
		<!-- 分页器 -->
		<div class="pageBox">
			<el-pagination @size-change="handleSizeChange" @current-change="pageChange" :current-page.sync="cur"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background></el-pagination>
		</div>
		<!-- 发送/审核/查看模板 -->
		<contractDialog :options="contract" @clickReject="clickReject" @subContract="subContract"></contractDialog>
		<el-dialog :visible.sync="detailFlag" width="800px" center>
			<position-info v-if="detailFlag" :id="positionid"  :shows="shows" :houseshow="houseshow"
				 ></position-info>
			<div slot="footer">
			</div>
		</el-dialog>
		
			<el-dialog :visible.sync="showremindDialog" width="660px" height="309px" class="evalDialog">
				<div class="remindbox" >
					<h2 class="title">
						提示
					</h2>
					<div class="content">
						<el-input 
						  type="textarea"
						  :autosize="{ minRows: 3.4, maxRows: 6}"
						  placeholder="请输入下架原因"
						  v-model="remindcotent">
						</el-input>
						<div class="footer">
						<el-button style="margin-left: 172px;" @click="cancel">取消</el-button>
						<el-button type="primary" @click="subdown">确认</el-button>
						</div>
					</div>
					
				</div>
				
				</el-dialog>
	</div>
</template>

<script>
	import positionInfo from "../socical/post/positionInfo.vue"
	export default {
		components: {
			positionInfo,
			comNavTabs: () => import("@/household/common/comNavTabs.vue"),
			comTable: () => import("@/household/common/comTable.vue"),
			contractDialog: () => import("@/component/contract/contractDialog.vue")
		},
		data() {
			return {
				houseshow:true,
				shows:true,
				positionid:'',
				textarea:'',
				remindcotent:'',
				showremindDialog:false,
				/* 主导航栏列表数据 */
				mainTabs: {
					index: 0, //当前是在哪个tab栏
					data: [{
							title: '家政雇主需求'
						},
						// {title:'敲章人认证'},
						// {title:'审核人认证'}
					]
				},
				headerTitle: '家政雇主需求', //头部标题
				/* 副导航栏列表数据 */
				navList: {
					index: 0, //当前是在哪个tab栏
					data: [{
							title: '发布中'
						},
						{
							title: '已下架'
						},
					]
				},
				form: {
					userName: '',
					telnum: '',
					startDate: '',
					endDate: '',
				},
				/* 表格数据 */
				tableList: {
					list: [{
								title: '雇主姓名',
								prop: 'username',
								isClick: false
							},
							{
								title: '手机号码',
								prop: 'telnum',
								isClick: false
							},
							{
								title: '职位名称',
								prop: 'positionname',
								isClick: false
							},
							{
								title: '发布时间',
								prop: 'insertdate',
								isClick: false
							},
					],
					noOperation: true, //是否有操作项
					operation: [ //操作项内容
						{
								name: '下架',
								isBtn: false,
								title: 'openConDialog'
							},
							{
								name: '查看',
								isBtn: false,
								title: 'openlookDialog'
							}
					],
					data: []
				},



				/* 电子合同数据 */
				contract: {
					lookPDFDialog: false, //电子合同发送/查看模板
					btnTextl: '资料驳回', //按钮左内容
					btnTextr: '确认发送完成', //按钮右内容
					companyTitle: '上海天都人力资源有限公司', //企业名称
					data: {
						agentName: '', //敲章人姓名
						agentTelnum: '', //敲章人手机号
						auditName: '', //审核人姓名
						auditTelnum: '', //审核人手机号
						applicationFormUrl: '', //证书申请表pdf
						authorizationUrl: '', //委托书pdf
						auditorAttorneyUrl: '', //审核人pdf
						businessLicenseUrl: '', //企业营业执照照片
						agentIdCardUrl: '', //法人身份证复印件照片
						corporateIdentityCardUrl: '', //敲章人身份证照片
						auditorCardCopiesUrl: '', //审核人身份证照片
					},
					textarea: '', //驳回理由
					isContract: true, //当前是否显示三张照片
					agentShow: false, //是否显示敲章人信息
					auditShow: false, //是否显示审核人信息
					showBtn: false, //是否展示按钮栏和驳回理由
					showTextarea: false, //是否展示驳回理由框
					placeholder: '', //占位符含义
					tableData: [
						/* {
							applyTime: '2016-05-02',					//申请时间
							createTime: '2016-05-02',					//审核时间
							operator: '王小虎',							//操作人
							auditResult: '未通过',						//审核结果
							cause: '资料不全',							//备注	
						} */
					]
				},


				/* 分页功能数据 */
				cur: 1,
				pageSize: 10,
				totalNum: 0, //总共有多少条数据,根据这个数据去适配页数
				positionid: '',
				remark: '',
				detailFlag: false,
				company: '',
				hstatus:1
			}
		},
		created() {
			this.getDataList();
		},
		methods: {
			openlookDialog(data){
				console.log('触发');
				this.detailFlag=true
				this.positionid=data.positionid
			},
			cancel (){
				this.textarea = '',
				this.showremindDialog=false
			},
			lookposition(row) {
				console.log(row);
				this.positionid = row.positionid;
				this.remark = row.remark;
				this.company = row.companyname;
				this.detailFlag = true;
				// this.linkTo("/home/enteringaddposition", {
				// 	positionid: data.positionid
				// });

			},

			search() {
			this.getDataList();
			},
			// 主tab栏切换
			mainTabSwitch(index) {
				console.log(index);
				this.mainTabs.index = index;
				index == 0 ? this.headerTitle = "电子合同认证" : '';
				index == 1 ? this.headerTitle = "敲章人认证" : '';
				// index==2?this.headerTitle="审核人认证":'';
				this.cur = 1;
				this.pageSize = 10;
				this.tabSwitch(0);
			},
			// tab栏切换
			tabSwitch(index) {
				console.log(index);
				this.navList.index = index;
				this.tableList.list.splice(0);
				this.navList.data.splice(0);
				this.tableList.operation.splice(0);
				this.tableList.list = [{
								title: '雇主姓名',
								prop: 'username',
								isClick: false
							},
							{
								title: '手机号码',
								prop: 'telnum',
								isClick: false
							},
							{
								title: '职位名称',
								prop: 'positionname',
								isClick: false
							},
							{
								title: '发布时间',
								prop: 'insertdate',
								isClick: false
							},
				];
				if (this.mainTabs.index == 0) {
					this.hstatus=1
					this.navList.data = [{
							title: '发布中'
						},
						{
							title: '已下架'
						},
					]
					if (this.navList.index == 0) {

						this.tableList.operation = [{
								name: '下架',
								isBtn: false,
								title: 'openConDialog'
							},
							{
								name: '查看',
								isBtn: false,
								title: 'openlookDialog'
							}
						];
					} else if (this.navList.index == 1) {
						this.hstatus=2
						this.tableList.list = [{
								title: '雇主姓名',
								prop: 'username',
								isClick: false
							},
							{
								title: '手机号码',
								prop: 'telnum',
								isClick: false
							},
							{
								title: '职位名称',
								prop: 'positionname',
								isClick: false
							},
							{
								title: '下架时间',
								prop: 'insertdate',
								isClick: false
							},
						];

						this.tableList.operation = [{
							name: '查看',
							isBtn: false,
							title: 'openlookDialog'
						}];
					} else if (this.navList.index == 2 || this.navList.index == 3) {
						this.tableList.operation = [{
							name: '查看',
							isBtn: false,
							title: 'openlookDialog'
						}];
					}
				} else {
					this.navList.data = [{
							title: '待审核'
						},
						{
							title: '已通过'
						},
						{
							title: '未通过'
						}
					]
					if (this.navList.index == 0) {
						this.tableList.operation = [{
							name: '审核',
							isBtn: false,
							title: 'openConDialog'
						}];
					} else if (this.navList.index == 1 || this.navList.index == 2) {
						this.tableList.operation = [{
							name: '查看',
							isBtn: false,
							title: 'openlookDialog'
						}];
					}
				}
				
				if(index==0){
					this.hstatus=1
				}else {
					this.hstatus=2
				}
				this.getDataList();
			},
			// 获取数据列表
			getDataList() { 
				let params = {
					pagenum: this.cur,
					pagesize: this.pageSize,
					status:this.hstatus,
					username:this.form.userName,
					telnum:this.form.telnum,
					insertdate:this.form.startDate,
					updatetdate:this.form.endDate,
				}
				this.$ceshiAxios.post('/v1/house/housekeepPc', params).then(res => {
					console.log(res);
					if (res.data.code === 1) {
						this.tableList.data=res.data.data.plist;
						this.totalNum =Math.abs(res.data.data.total);
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
			},
			// 打开电子合同模板
			openContractDialog(data) {
				this.showremindDialog= true
				this.positionid = data.positionid
				console.log(data);
			 },
			// 点击驳回或者取消按钮
			clickReject() {
				if (!this.contract.showTextarea) {
					this.contract.showTextarea = true;
					this.contract.btnTextl = '取消';
					this.contract.btnTextr = '确定';
					if (this.current == '0') {
						this.contract.placeholder = '驳回理由';
					} else {
						this.contract.placeholder = '未通过理由';
					}
				} else {
					this.contract.showTextarea = false;
					if (this.current == '0') {
						this.contract.btnTextl = '资料驳回';
						this.contract.btnTextr = '确认发送完成';
					} else {
						this.contract.btnTextl = '审核未通过';
						this.contract.btnTextr = '审核通过';
					}
				}
			},
			// 提交电子合同认证资料
			subContract() {
				let params = {};
				if (this.mainTabs.index == 0) {
					params.type = '1';
				} else if (this.mainTabs.index == 1) {
					params.type = '2';
				} else {
					params.type = '3';
				}
				if (this.contract.showTextarea) {
					if (!this.contract.textarea) {
						this.$message({
							message: '理由不能为空！',
							type: 'warning'
						})
						return false;
					} else {
						params.status = '3';
						params.cause = this.contract.textarea;
					}
				} else {
					if (this.navList.index == '0' && this.mainTabs.index != 2) {
						params.send = '1';
					} else if ((this.navList.index == '1' && this.mainTabs.index != 2) || (this.navList.index == '0' &&
							this.mainTabs.index == 2)) {
						params.status = '2';
					}
				}
				params.operator = JSON.parse(localStorage.getItem('userinfo')).username;
				params.companyId = this.contract.data.companyId;
				console.log(params);
				//https://house.fcw-china.com
				this.$eleconAxios.post('/electronic/dajiqqian/updateCompanyAuth', params).then(res => {
					console.log(res);
					if (res.data.code === 1000) {
						this.$message({
							message: '操作成功！',
							type: 'success'
						})
						this.contract.textarea = '';
						this.getDataList();
					} else {
						this.$message({
							message: res.data.message,
							type: 'success'
						})
					}
				})
				this.contract.lookPDFDialog = false;

			},
			//下架
			subdown (){
				let params = {
					 positionid:this.positionid,
					 reson:this.remindcotent,
				}
				this.$ceshiGetAxios('v1/house/updateStatusPc', params).then(res => {
					 if(res.data.code==0){
						 this.showremindDialog=false
						 this.getDataList();
						 this.$message({
						 	message: '操作成功！',
						 	type: 'success'
						 })
						 this.tabSwitch(1)
					 }else {
						this.$message({
							message: res.message,
							type: 'error'
						}) 
					 }
				})
			},

			//当前页是第几页,点击的第几页的时候调用这个函数
			pageChange(p) {
				// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
				// 然后把这个当前页数转换成字符串形式赋值给page，
				// 然后把page这个参数传给search这个方法
				console.log(p);
				this.cur = p;
				this.getDataList();
			},
			//每页有多少条,10,20,50等,点击选择的时候调用这个方法
			handleSizeChange(val) {
				console.log(val);
				this.pageSize = val;
				this.getDataList();
			},
		}
	}
</script>

<style scoped="scoped">
	.container {
		background-color: #fff;
		height: 100%;
		padding-left: 20px;
	}

	.main-tabs {
		background-color: rgb(203, 229, 251);
		margin-bottom: 20px;
		margin-left: -20px;
		padding-left: 50px;
	}

	.main-tabs li {
		height: 40px;
		line-height: 40px;
		float: left;
		margin: 10px 20px;
		padding: 0 30px;
	}

	.main-tabs .active {
		background: #0064E4;
		border-radius: 20px;
		color: #fff;
	}

	.header-title {
		padding: 0 0 20px 0;
		border-bottom: 1px solid #D2D2D2;
	}

	.header-title span {
		width: 15px;
		height: 30px;
		background-color: #0064E4;
		margin-right: 20px;
		float: left;
	}

	.header-title p {
		float: left;
		font-weight: bold;
		line-height: 30px;
	}

	.pageBox {
		margin-top: 20px;
	}
	.content {
		width: 520px;
		height: 150px;
		margin: 0 auto;
	}
	.footer {
		margin-top: 20px;
		margin-bottom: 20px;
		
	}
	/* .footer >el-button{
		margin-left: 102px;
		
	} */
</style>
